
const MAIN = document.getElementById('main')
const POPUP = document.getElementById('popup')
const POPUPCLOSE = document.getElementById('close') //弹框关闭按钮
const POPUPBOX = document.querySelector('#popup .popup-box')
const POPUPBTNIMG = document.querySelector('#popup .li-img')
const POPUPBTNABOUT = document.querySelector('#popup .li-about')
const POPUPBOXIMG = document.querySelector('#popup .li-img-box')
const POPUPBOXABOUT = document.querySelector('#popup .li-about-box')
const BIGIMG = document.querySelector('#bigImg')
const imgWidth = MAIN.clientHeight / 4 / 0.618; //图片宽度
const MAINscreenWidth = MAIN.clientWidth //可视区域宽度
const MAINscreenHeight = MAIN.clientHeight //可视区域高度
const ISPHONE=MAINscreenWidth<960 //是否是手机


//状态
const state = {
    loadingState: 'loadmore', //  loadmore loading  nomore
    showImgType: 'new360',//当前显示图片类型 new360,list360
}

//查询参数
var query = {
    pageno: 1,
    count: 40,
    cids: 36,
    content:'搜索内容'
}



window.onload = function () {
    bind(MAIN, "DOMMouseScroll", MAIN.onmousewheel);//这是为了兼容火狐浏览器
    load360newesList()
    load360Category()
    //设置图片宽度
    setImgWidth()
};

//设置滚动事件
MAIN.onmousewheel = function (event) {
    let scrollX = 100 //一次滚动的距离
    if (event.wheelDelta > 0 || event.detail < 0) {
        //滚动条向上滚动
        while (scrollX != 0) {
            MAIN.scrollLeft--
            scrollX--
        }
        // MAIN.scrollLeft-=scrollX

    } else {
        //滚动条向下滚动
        while (scrollX != 0) {
            MAIN.scrollLeft++
            scrollX--
        }
        // MAIN.scrollLeft+=scrollX
    }
    if(!ISPHONE){
        event.preventDefault && event.preventDefault();//为火狐浏览器取消默认行为并兼容ie8
    }
    return false;
};

function bind(obj, eventStr, callback) {
    if (obj.addEventListener) {
        obj.addEventListener(eventStr, callback, false);
    } else {
        obj.attchEvent("on" + eventStr, function () {
            //在匿名函数中调用回调函数,通过call方法来改变this的指向
            callback.call(obj);
        });
    }
}

//监听滚动条
MAIN.onscroll = function (e) {
    // console.log(MAIN.scrollTop)
    // console.log(MAIN.scrollHeight)
    //监听滚动
    if ((!ISPHONE && MAIN.scrollLeft + MAINscreenWidth > MAIN.scrollWidth * 0.8) || (ISPHONE && MAIN.scrollTop + MAINscreenHeight > MAIN.scrollHeight * 0.8) ) {
        onReachBottom()
    }
};





//页面接近底部时
function onReachBottom() {
    // console.log('触底了')
    //获取数据
    if (state.showImgType == 'new360' && state.loadingState == 'loadmore') {
        query.pageno++
        load360newesList()
    }else if(state.showImgType == 'list360' && state.loadingState == 'loadmore'){
        query.pageno++
        load360List()
    }
}

//增加内容
function conAdd(list) {
    for (let index = 0; index < list.length; index++) {
        //创建一个div
        var div = document.createElement("div");
        div.classList.add('img-col')
        div.style.width = ISPHONE? "100%" : imgWidth + 'px'

        if (list[index] && list[index + 3]) {
            div.innerHTML = '<div class="img-wrap"> <a download href="'+list[index].url+'?response-content-type=application/octet-stream">下载</a> <img onclick="lockImg(this)" src="' + list[index].url + '" alt="" srcset=""></div>'
            +'<div class="img-wrap"> <a download href="'+list[index+1].url+'?response-content-type=application/octet-stream">下载</a> <img  onclick="lockImg(this)"  src="' + list[index + 1].url + '" alt="" srcset=""> </div>'
            +'<div class="img-wrap"> <a download href="'+list[index+2].url+'?response-content-type=application/octet-stream">下载</a> <img  onclick="lockImg(this)"  src="' + list[index + 2].url + '" alt="" srcset=""> </div>'
            +'<div class="img-wrap"> <a download href="'+list[index+3].url+'?response-content-type=application/octet-stream">下载</a> <img  onclick="lockImg(this)"  src="' + list[index + 3].url + '" alt="" srcset=""> </div>'
            MAIN.appendChild(div)
            index += 3
        } else {
            let strHtml = ''
            for (let i = 0; i < 4; i++) {
                if (list[index + i]) {
                    strHtml += ' <div class="img-wrap"> <a  onclick="lockImg(this)"  download href="'+list[index+i].url+'?response-content-type=application/octet-stream">下载</a> <img src="' + list[index + i].url + '" alt="" srcset="">'
                }
            }
            div.innerHTML = strHtml
            MAIN.appendChild(div)
            return
        }


    }

}

//点击分类
function getCategory(id){
    MAIN.innerHTML=''
    state.showImgType="list360"
    query.cids=id;
    query.pageno=1;
    load360List()
    showHiddenPupup()
}
//点击搜索
function search(){
    query.content=document.querySelector('.li-img-box input').value
    MAIN.innerHTML=''
    query.pageno=1;
    load36Search()
    showHiddenPupup()
}

//设置图片父节点宽度
function setImgWidth() {
    let imgs = document.querySelectorAll('#main .img-col')
    for (let index = 0; index < imgs.length; index++) {
        const element = imgs[index];
        element.style.width = imgWidth + 'px'
    }
}

//获取360壁纸分类
function load360Category() {
    $.ajax({
        type: "GET",
        url: 'http://wp.birdpaper.com.cn/intf/getCategory',
        dataType: "json",
        success: function (data) {
            let strHtml=''
            for (let index = 0; index < data.data.length; index++) {
                const element = data.data[index];
                strHtml+='<div onclick="getCategory('+element.old_id+')">'+element.category+'</div>'
            }
            document.getElementById('li-category').innerHTML=strHtml
        }
    });
}

//按分类获取360壁纸图片
function load360List() {
    state.loadingState='loading'

    $.ajax({
        type: "GET",
        url: 'http://wp.birdpaper.com.cn/intf/GetListByCategory',
        data: "cids=" + query.cids + "&pageno=" + query.pageno + "&count=" + query.count,
        dataType: "json",
        success: function (data) {
            conAdd(data.data.list)
            state.loadingState = data.data.list.length == 0 ? 'nomore' : 'loadmore'
            showloading()
        }
    });
}

//获取最新360壁纸图片
function load360newesList() {
    state.loadingState='loading'
    $.ajax({
        type: "GET",
        url: 'http://wp.birdpaper.com.cn/intf/newestList',
        data: { pageno: query.pageno, count: query.count },
        dataType: "json",
        success: function (data) {
            conAdd(data.data.list)
            state.loadingState = data.data.list.length == 0 ? 'nomore' : 'loadmore'
            showloading()
        }
    });
}

//搜索360壁纸图片
function load36Search() {
    $.ajax({
        type: "GET",
        url: 'http://wp.birdpaper.com.cn/intf/search',
        data: { content:query.content,pageno: query.pageno, count: query.count },
        dataType: "json",
        success: function (data) {
            conAdd(data.data.list)
            state.loadingState = data.data.list.length == 0 ? 'nomore' : 'loadmore'
            showloading()
        }
    });
}

//显示列表数据加载状态
function showloading(){
    if (state.loadingState=='nomore') {
        let div=document.createElement('div')
        div.classList.add('state-loading')
        div.innerHTML='没有更多数据了...'
        MAIN.appendChild(div)
    }
}

//显隐弹框
function showHiddenPupup() {
    let isShow = POPUP.style.zIndex == '3'
    console.log(isShow)
    if (isShow) {
        //隐藏
        POPUPBOX.style.transform = 'scale(0,0)'
        setTimeout(()=>{
            POPUP.style.zIndex = -1
        },100)
    } else {
        //显示
        POPUP.style.zIndex = 3
        POPUPBOX.style.transform = 'scale(1,1)'

    }
}


//弹框点击事件
POPUPBTNIMG.addEventListener('click',()=>{//图片
   POPUPBTNIMG.classList.remove('active')
   POPUPBTNABOUT.classList.remove('active')
   POPUPBTNIMG.classList.add('active')


   POPUPBOXIMG.style.display='block'
   POPUPBOXABOUT.style.display='none'
})
POPUPBTNABOUT.addEventListener('click',()=>{//说明
    POPUPBTNIMG.classList.remove('active')
    POPUPBTNABOUT.classList.remove('active')
    POPUPBTNABOUT.classList.add('active')

    POPUPBOXIMG.style.display='none'
    POPUPBOXABOUT.style.display='block'
})

//点击图片，查看大图
function lockImg(e){
    let isShow=  BIGIMG.style.display=='block'
    console.log(e)
    if(isShow){
        //隐藏
        BIGIMG.style.display='none'
        document.querySelector('#bigImg .mask').style.display='none'
    }else{
        let img=document.querySelector('#bigImg img')
        img.setAttribute('src',e.src)
        BIGIMG.style.display='block'
        document.querySelector('#bigImg .mask').style.display='block'
        
    }
}
//点击遮罩层
document.querySelector('#bigImg .mask').addEventListener('click',()=>{
    lockImg()
})